<template>
  <div class="container">
    <!-- 头部 -->
    <el-header class="header">
      <span class="name">{{ empName }}</span>
      <span class="title">{{ deptName }} {{ positionName }}</span>
    </el-header>

    <!-- logo -->
    <div class="image-container">
      <img src="../../assets/logo.png" alt="图片" class="logo">
    </div>

    <!-- 服务应用 -->
    <div class="service">
      <span class="service-title">服务应用</span>
      <div class="button-group">
        <el-button @click="goToAttendance">
          <div class="button-content">
            <img src="../../assets/打卡.png" alt="图片" class="button-icon">
            <span class="button-text">考勤</span>
          </div>
        </el-button>
        <el-button @click="goToMessage">
          <div class="message-button">
            <!-- 条件渲染小红点 -->
            <el-badge v-if="hasUnreadMessage" :value="''" class="message-badge"></el-badge>
            <div class="button-content">
              <img src="../../assets/消息.png" alt="图片" class="button-icon">
              <span class="button-text">消息</span>
            </div>
          </div>
        </el-button>
        <el-button @click="goToApplication">
          <div class="button-content">
            <img src="../../assets/申请.png" alt="图片" class="button-icon">
            <span class="button-text">申请</span>
          </div>
        </el-button>
        <el-button @click="goToApproval">
          <div class="button-content">
            <img src="../../assets/审批.png" alt="图片" class="button-icon">
            <span class="button-text">审批</span>
          </div>
        </el-button>
      </div>
    </div>

    <!-- 通知公告 -->
    <div class="notice">
      <span class="notice-title">通知公告</span>

      <!-- 部门选择 - 横向滚动 -->
      <div class="dept-scroll-container">
        <div class="dept-scroll-wrapper">
          <el-button v-for="dept in departments" :key="dept.id" :class="{ 'active': selectedDept === dept.id }"
            @click="selectDept(dept.id)" class="dept-btn">
            {{ dept.name }}
          </el-button>
        </div>
      </div>

      <!-- 公告列表 -->
      <div class="notice-list-container">
        <div class="notice-list">
          <div v-if="loading" class="loading">加载中...</div>
          <div v-else-if="notices.length === 0" class="no-data">暂无公告</div>
          <div v-else>
            <div class="notice-item" v-for="item in notices.records" :key="item.id" @click="viewNoticeDetail(item.id)">
              <div class="notice-content">{{ item.title }}</div>
              <div class="notice-time">{{ formatTime(item.publishTime) }}</div>
            </div>
            <div class="notice-end">没有更多公告了</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="footer">
      <el-tabs :tab-position="'bottom'" class="tabs" v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="工作中心" name="工作中心" class="custom-tab"></el-tab-pane>
        <el-tab-pane label="我的" name="我的" class="custom-tab"></el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import { ref } from "vue";
import { getAllDepts } from "../../api/dept.js";
import { getPublishedNotices } from "../../api/notice.js";
import { getSessionStorageObj } from "../../utils/common.js";
import { hasUnreadMessage } from "../../api/message.js";

const activeName = ref("工作中心");

//得到全局数据
//let userInfo = getSessionStorageObj('userInfo');

export default {
  data() {
    return {
      activeName: "工作中心",
      selectedDept: null,
      departments: [],
      notices: [],
      loading: false,
      // empName: userInfo.name,
      // deptName: userInfo.deptName,
      // positionName: userInfo.positionName,
      hasUnreadMessage: false,
      // empId: userInfo.empId,
      empName:"",
      deptName:"",
      positionName:"",
      empId:"",
    };
  },
  methods: {
    goToAttendance() {
      console.log("考勤");
      this.$router.push("/attendance");
    },
    goToMessage() {
      console.log("消息");
      this.$router.push("/message");
    },
    goToApplication() {
      console.log("申请");
      this.$router.push("/application");
    },
    goToApproval() {
      console.log("审批");
      this.$router.push("/approval");
    },
    handleTabClick(tab) {
      console.log(tab);
      console.log(tab.props.name);
      if (tab.props.name === "工作中心") {
        this.$router.push("/betch");
      } else if (tab.props.name === "我的") {
        this.$router.push('/myCenter');
      }
    },

    // api-调用后端接口检查是否有未读消息
    checkUnreadMessages() {
      hasUnreadMessage({ id: this.empId })
        .then((res) => {
          console.log("检查未读消息响应:", res);

          this.hasUnreadMessage = res.result === 0; // result 为 0 表示有未读消息
        })
        .catch((error) => {
          console.error("检查未读消息失败", error);
        });
    },

    // 获取所有部门
    async fetchDepartments() {
      try {
        const res = await getAllDepts();
        if (res.flag) {
          this.departments = res.result;
          if (this.departments.length > 0) {
            this.selectedDept = this.departments[0].id;
            this.fetchNotices(this.selectedDept);
          }
        }
      } catch (error) {
        console.error("获取部门列表失败:", error);
      }
    },
    // 获取部门公告
    async fetchNotices(deptId) {
      this.loading = true;
      try {
        const params = {
          id: null,
          startDate: "",
          endDate: "",
          deptId: deptId,
        };
        const res = await getPublishedNotices(params);
        if (res.flag) {
          this.notices = res.result;
          console.log("notices：", this.notices);
          console.log("notices.record：", this.notices.records);
        }
      } catch (error) {
        console.error("获取公告列表失败:", error);
      } finally {
        this.loading = false;
      }
    },
    // 部门选择
    selectDept(deptId) {
      this.selectedDept = deptId;
      this.fetchNotices(deptId);
    },
    // 获取部门名称
    getDeptName(deptId) {
      const dept = this.departments.find((d) => d.id === deptId);
      return dept ? dept.name : "未知部门";
    },
    // 格式化时间
    formatTime(time) {
      if (!time) return "";
      return new Date(time).toLocaleString();
    },
    // 查看公告详情
    viewNoticeDetail(id) {
      this.$router.push({
        path: "/notice",
        query: { id: id },
      });
    },
  },
  mounted() {
    const userInfo = getSessionStorageObj('userInfo');
    this.empName = userInfo.name;
    this.deptName = userInfo.deptName;
    this.positionName = userInfo.positionName;
    this.empId = userInfo.empId;
    
    this.fetchDepartments();
    this.checkUnreadMessages();
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #e1efff;
  min-height: 100vh;
}

.header {
  height: 8vh;
  width: 100%;
  background-color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 两端对齐 */
}

.title {
  color: #304156;
  font-weight: bold;
}

.image-container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  width: 100%;
  /* 容器宽度占满父容器 */
  margin: 2vh auto 1vh;
}

.logo {
  width: 95%;
  /* 图片宽度为容器宽度的90%，留出左右各5%的边距 */
  max-width: 95%;
  /* 图片最大宽度为100%，防止溢出 */
  height: auto;
  /* 高度自动，保持图片比例 */
  border-radius: 10px;
  /* 设置圆角半径为10px */
}

.service {
  width: 95%;
  height: 30vh;
  background-color: white;
  border-radius: 10px;
  margin: 1vh auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-title {
  font-weight: bold;
  margin-top: 2vh;
  font-size: 20px;
}

.button-group {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  /* 垂直居中 */
  height: 100%;
}

.button-group button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 垂直居中 */
  width: 20%;
  /* 设置按钮的宽度 */
  height: 70%;
  /* 设置按钮的高度 */
  margin: 0 5px;
  /* 可选：设置按钮之间的间距 */
  font-size: 16px;
  /* 可选：设置按钮文字大小 */
  border: none;
  /* 可选：移除按钮边框 */
  background-color: #b4d2f5;
  /* 可选：设置按钮背景颜色 */
  color: white;
  /* 可选：设置按钮文字颜色 */
  cursor: pointer;
  /* 可选：设置鼠标悬停时的光标样式 */
  border-radius: 10px;
  /* 设置圆角半径为10px */
}

.button-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button-icon {
  width: 100%;
  height: auto;
}

.button-text {
  margin-top: 8px;
  text-align: center;
  color: #304156;
  font-weight: bold;
}

.footer {
  /* 将 footer 推到页面底部 */
  width: 100vw;
  height: 6vh;
  /* 确保 footer 宽度占满整个页面 */
  background-color: #f5f5f5;
  position: fixed;
  bottom: 0;
}

:deep(.tabs .el-tabs__nav) {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  width: 100%;
  /* 确保导航栏宽度占满整个容器 */
  position: fixed;
  bottom: 0;
}

:deep(.tabs .el-tabs__item) {
  flex: none;
  /* 不平分宽度 */
  text-align: center;
  /* 文字居中 */
  width: 30%;
  /* 每个标签占 50% */
  font-weight: bold;
  font-size: 18px;
}

/* 公告样式 */
.notice {
  width: 95%;
  background-color: white;
  border-radius: 10px;
  margin: 1vh auto 8vh;
  /* 保持与底部导航栏的距离 */
  padding: 2vh 0 0;
  display: flex;
  flex-direction: column;
  /* 移除固定高度，让内容决定高度 */
  min-height: auto;
}

.notice-list-container {
  /* 移除固定高度 */
  height: auto;
  overflow: visible;
  /* 改为visible让内容自然扩展 */
  padding: 0 2vh;
}

.notice-list {
  /* 移除固定高度 */
  height: auto;
  overflow: visible;
  /* 改为visible让内容自然扩展 */
}

.notice-title {
  font-weight: bold;
  font-size: 20px;
  margin: 0 2vh 2vh;
  text-align: center;
}

/* 部门选择滚动容器 */
.dept-scroll-container {
  width: 76vw;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 2vh 1vh;
  margin-bottom: 1vh;
  border-bottom: 1px solid #eee;
  position: relative;
  left: 5vw;
}

.dept-scroll-wrapper {
  display: inline-block;
}

.dept-btn {
  border: none;
  background: none;
  color: #304156;
  font-size: 16px;
  padding: 5px 6px;
  cursor: pointer;
  margin-right: 10px;
  display: inline-block;
}

.dept-btn.active {
  color: #409eff;
  font-weight: bold;
  border-bottom: 2px solid #409eff;
}

.notice-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.notice-item:hover {
  background-color: #f5f7fa;
}

.notice-content {
  font-size: 16px;
  color: #304156;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-time {
  font-size: 14px;
  color: #909399;
}

.loading,
.no-data,
.notice-end {
  text-align: center;
  padding: 20px;
  color: #909399;
}

/* 隐藏滚动条但保持滚动功能 */
.dept-scroll-container::-webkit-scrollbar {
  display: none;
}

.dept-scroll-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.message-button {
  position: relative; /* 确保小红点相对于按钮定位 */
}

/* 小红点 */
.message-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: red;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  float: right;
}
</style>